<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps<{
  content: string;
}>();

function copy(str: string) {
  let clipboard = new window.ClipboardJS(".copy-btn", {
    text: function (el: any) {
      return str;
    },
  });
}
function HTMLEncode(html) {
var temp = document.createElement("div");
(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
var output = temp.innerHTML;
temp = null;
return output;
}
const filtercontent = computed(() => {
  return props.content.replace(/```(.*)```/,function($0,$1){
      $1 = $1.replace(/<br\/>/g,'\n')
      return "<code>" + HTMLEncode(""+ $1 +"") + "</code>"
  });
});
let copyHandler = () => {
  copy(props.content);
  ElMessage({
    type: "success",
    message: "复制成功",
  });
};
</script>
<template>
  <div v-if="content">
    <div class="row s-row-center">
      <div class="col-md-10 s-mb14 stretch-card grid-margin">
        <div class="smr-10">
          <img src="/static/chat/assets/images/robot.png" class="s-avatar" alt="circle-image" />
        </div>
        <div class="s-card card-img-holder text-white">
          <div class="s-dia-card">
            <div style="color: #333" id="info_one answerIndex
            " class="mainText info">
              <p class="s-card-words" v-html="filtercontent"></p>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row s-row-center">
      <div class="col-md-10 s-mb14 stretch-card grid-margin">
        <div class="smr-10">
          <div class="s-avatar" alt="circle-image" />
        </div>
        <div style="background: transparent" class="s-card card-img-holder text-white">
          <div class="s-dia-card">
            <div class="mainText info">
              <p class="copy-btn" @click="copyHandler">复制</p>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.s-dia-card p {
  word-break: break-all;
}
</style>
